// @flow
import React from 'react'
import { ReactSVG } from 'react-svg'
import styled from 'styled-components'

const Svgs = ({ src, color, size = 24, rem, ...resetProps }) => (
	<Wrap>
		<ReactSVG
			path={src}
			svgStyle={{
				fill: color || '#000000',
				width: size && rem ? size : size + 'px',
				height: size && rem ? size : size + 'px',
				cursor: 'pointer',
			}}
			{...resetProps}
		/>
	</Wrap>
)


export default Svgs


const Wrap = styled('div')`
	& > div > div {
		height: ${({ size }) => (size ? size + 'px' : '24px')};
		display: flex;
		align-items: center;
		justify-content: center;
	}
`



// WEBPACK FOOTER //
// ./src/components/Icon/svg.js